@media screen and (max-width: 657px) {
    //只是笔记页面响应式
    .cooran,.text,.detail{
        width: 100%;
        margin:0 15px;
    }
    .left{
        width: 100% !important;
        margin: 0 10px;
    }
    .cooran .left{
        .items{
            width: 100%;
            border-radius: var(--border-radius);
            height: 28%;
            transition: transform .3s;
            display: flex;
            flex-direction: column;
            padding: .8rem;
            img{
                width: 98%;
            }
        }
    }
    .detail .left .main img{
        width: 98% !important;
    }
    .right{
        display: none;
    }
    //首页头部响应
    .Index{
        width: 100vw !important;
        display: flex;
        justify-content: space-between !important;
        .img>img{
            margin-left: -7vw !important;
          }
        >.three{
            display: block;
            >.items{
                margin-top: 3px;
            }
        }
        .nav,.the,.sear{
            display: none !important;
        }
    }
}
/*小屏幕*/
@media screen and (min-width: 657px) and (max-width: 768px){
    //知识笔记页面响应
    .cooran,.text,.detail{
        width: 100%;
        margin:0 15px;
    }
    .left{
        width: 100% !important;
        margin: 0 auto;
        .items{
            width: 100%;
            max-height: 186px;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: transform .3s;
            display: flex;
            flex-wrap: nowrap;
            padding: .8rem;
            img{
                max-width: 284px;
            }
        }
    }
    .right{
        display: none;
    }
    .detail .left img{
        width: 98% !important;
    }
    //首页头部响应
    .Index{
        width: 100vw !important;
        display: flex;
        justify-content: space-between !important;
        .img>img{
            margin-left: -7vw !important;
          }
        >.three{
            display: block;
            >.items{
                margin-top: 3px;
            }
        }
        .nav,.the,.sear{
            display: none !important;
        }
    }
}
/*平板*/
@media screen and (min-width: 768px) and (max-width: 992px){
    .cooran,.text,.detail{
        width: 768px;
    }
    .cooran .left{
        .items{
            width: 100%;
            height: 139px;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: transform .3s;
            display: flex;
            flex-wrap: nowrap;
            padding: .8rem;
            img{
                width: 162px;
            }
        }
    }
    .detail .left .main img{
        width: 406px;
    }
    .three.active{
        display: none !important;
    }
    .Alert.active{
        display: none !important;
      }
}
/*中等屏幕*/
@media screen and (min-width: 992px) and (max-width: 1200px){
    .cooran,.text,.detail{
        width: 970px;
    }
    .cooran .left{
        .items{
            width: 100%;
            height: 161px;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: transform .3s;
            display: flex;
            flex-wrap: nowrap;
            padding: .8rem;
            img{
                width: 234px;
                margin-left: 10px;
            }
        }
    }
    .detail .left .main img{
        width: 608px;
    }
    // 头部
    .three.active{
        display: none !important;
    }
    .Alert.active{
        display: none !important;
      }
}
/*大屏幕，或者宽屏*/
@media screen and (min-width: 1200px) {
    .cooran,.text,.detail{
        width: 1140px;
    }
    //头部
    .three.active{
        display: none !important;
    }
    .Alert.active{
        display: none !important;
      }
}
